<template>
  <el-row :gutter="20" v-for="article in results" :key="article.id">
    <el-col :span="2" />
    <el-col :span="10" v-for="a in article" :key="a.id">
      <el-card shadow="hover">
        <div class="card-header">
          <span class="title" @click="toDetail(a.id)">{{ a.title }}</span>
        </div>
        <el-container>
          <el-aside width="256">
            <el-image
              style="
                border-radius: 5px;
                padding-top: 20px 0 0 20px;
                width: 250px;
                height: 130px;
              "
              :src="a.thumbnail"
            />
          </el-aside>
          <el-main>
            <div class="article-thumbnail" @click="toDetail(a.id)">
              {{ a.title }}
            </div>
          </el-main>
        </el-container>
      </el-card>
    </el-col>
    <!-- <el-col :span="10"
      ><div class="grid-content bg-purple">qqqqqqqqqqqqqqqqqqqq</div></el-col
    > -->
    <el-col :span="2" />
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  props: {
    articles: Array,
  },
  setup(props) {
    const router = useRouter();
    console.log("Article-container收到数据了====>", props.articles);

    // 存储传递到该组件的数据，并做响应式处理，否则无法渲染页面
    const datas = reactive([]);
    // 存储一维数组转二维数组的数据
    const results = reactive([]);
    // 当传递过来的数组只有一个值时，底层自动变为Object，把它放进数组，后续统一处理
    if (!Array.isArray(props.articles)) {
      datas.push(props.articles as never);
    } else {
      datas.push(...(props.articles as never[]));
    }
    //跳转详情页面
    const toDetail = (id: number) => {
      const routeData = router.resolve({
        path: "/articles/" + id,
      });
      window.open(routeData.href, "_blank");
    };
    // 响应式追踪父组件传递过来的数据的依赖
    watchEffect(() => {
      datas.length = 0;
      if (!Array.isArray(props.articles)) {
        datas.push(props.articles as never);
        console.log(datas);
      } else {
        datas.push(...(props.articles as never[]));
      }
      // 一维转二维
      // 计算分类下视频卡片信息的长度和长度的一半，用于循环遍历数据
      const len = datas.length;
      const lineQuanlity = 2; // 一行有五个
      const lineNum =
        len % lineQuanlity === 0
          ? len / lineQuanlity
          : Math.floor(len / lineQuanlity) + 1; // 计算行数
      // 清除上一个页面的转化数据
      results.length = 0;
      for (let i = 0; i < lineNum; i++) {
        const temp = datas.slice(
          i * lineQuanlity,
          i * lineQuanlity + lineQuanlity
        );
        results.push(temp as never); // 浅层拷贝
        console.log("浅层拷贝======>", results);
      }
    });

    return {
      results,
      toDetail,
    };
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  padding-top: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>